<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let itemStyle = [
        {
            borderColor:"#FAE927",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#FAE927"
        },
        {
            borderColor:"#E9E416",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#E9E416"
        },
        {
            borderColor:"#C9DA36",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#C9DA36"
        },
        {
            borderColor:"#9ECB3C",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#9ECB3C"
        },
        {
            borderColor:"#6DBC49",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#6DBC49"
        },
        {
            borderColor:"#37B44E",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#37B44E"
        },
        {
            borderColor:"#3DBA78",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#3DBA78"
        },
        {
            borderColor:"#14ADCF",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#14ADCF"
        },
        {
            borderColor:"#209AC9",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#209AC9"
        },
        {
            borderColor:"#1E91CA",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#1E91CA"
        },
        {
            borderColor:"#2C6BA0",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#2C6BA0"
        },
        {
            borderColor:"#2B55A1",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#2B55A1"
        },
        {
            borderColor:"#2D3D8E",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#2D3D8E"
        },
        {
            borderColor:"#44388E",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#44388E"
        },
        {
            borderColor:"#6A368B",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#6A368B"
        },
        {
            borderColor:"#7D3990",
            color:"rgba(60,170,211,0.05)",
            shadowBlur:10,
            borderWidth:2,
            shadowColor:"#7D3990"
        }
    ];

    function preDealData(data){
        data.forEach(function (item,index) {
            item.itemStyle = itemStyle[index % itemStyle.length];
        });
        return data;
    }
    let option = {
        backgroundColor: "#090e36",
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c}$ ({d}%)"
        },
        legend: {
            show: false
        },
        calculable: true,
        series: [{
            type: 'pie',
            startAngle: 0,
            clockwise: false,
            radius: ["25%", "90%"],
            center: ['50%', '50%'],
            roseType: 'area',
            avoidLabelOverlap: false,
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}\n{d}%',
                textStyle: {
                    fontWeight: '100',
                    fontFamily: 'Microsoft YaHei',
                    color: '#FAFAFA',
                    fontSize:16
                },
            },
            data: []
        },
            {
                type: 'pie',
                radius: ["24%", "23%"],
                data: [100],
                center: ['50%', '50%'],
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,0.3)',
                    }
                },
                hoverAnimation: false,
                label: {
                    show: false,
                }
            },
            {
                type: 'pie',
                radius: ["22%", "21.5%"],
                data: [100],
                center: ['50%', '50%'],
                color: 'rgba(255,255,255,0.3)',
                hoverAnimation: false,
                label: {
                    show: false,
                }
            },
        ]
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "get",
        async : true,
        url : '/pie/one',
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                option.series[0].data = preDealData(result.data.series[0].data);
                if (result.data.legend && option.legend) {
                    option.legend.data = result.data.legend;
                }else if(option.legend){
                    let legend = [];
                    result.data.series[0].data.forEach(function (item,index) {
                        legend.push(item.name);
                    });
                    option.legend.data = legend;
                }
                if (result.data.title && option.title) {
                    option.title.text = result.data.title;
                }
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
